<template>
  <div class="product">
    <div class="areaBox">
      <div class="text">{{ productData.name }}产品数据展示</div>
      <div class="btns">
        <el-button @click="tablePro_back" type="primary" plain>返回</el-button>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="产品表格图" name="1"></el-tab-pane>
        <el-tab-pane label="产品趋势图" name="2"></el-tab-pane>
    </el-tabs>
    <el-table
      v-if="activeName == '1'"
      v-loading="tableLoading"
      :data="tableDataPro"
      style="width: 100%"
      class="tableTh"
      border
      stripe
    >
      <el-table-column
        :key="Math.random()"
        min-width="100"
        align="center"
        label="产品大类"
        prop="indexClass1"
      ></el-table-column>
      <el-table-column
        :key="Math.random()"
        min-width="150"
        align="center"
        label="产品细分"
        prop="indexName"
      ></el-table-column>
      <el-table-column
        :key="Math.random()"
        align="center"
        label="操作"
        min-width="80"
      >
        <template slot-scope="scope">
          <div style="color:#1890ff;cursor: pointer;" @click="handle_trend(scope.row)">看趋势</div>
          <div :class="productData.remarks == '3' ?'grey':'area'" @click="handle_source(scope.row)">看来源</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="年度目标">
        <el-table-column
          align="center"
          prop="thisYearBudget"
          label="绝对值"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="thisYearBudgetInrease"
          label="增长率"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.thisYearBudgetInrease + "%" }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="月度">
        <el-table-column
          min-width="80"
          align="center"
          prop="thisMonthIncome"
          label="本月"
        ></el-table-column>
        <el-table-column
          min-width="80"
          align="center"
          prop="lastYearIncome"
          label="上年同月"
        ></el-table-column>
        <el-table-column
          min-width="80"
          align="center"
          prop="tbYearInrease"
          label="同比增长"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.tbYearInrease + "%" }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="年度">
        <el-table-column
          min-width="85"
          align="center"
          prop="thisYearLjIncome"
          label="本年累计"
        ></el-table-column>
        <el-table-column
          min-width="85"
          align="center"
          prop="lastYearLjIncome"
          label="上年累计"
        ></el-table-column>
        <el-table-column
          min-width="80"
          align="center"
          prop="tbYearInreaseAmt"
          label="累计净增"
        >
        </el-table-column>
        <el-table-column
          min-width="80"
          align="center"
          prop="ntbYearInrease"
          label="同比增长"
        >
          <template slot-scope="scope">
            <div>
              {{ scope.row.ntbYearInrease + "%" }}
            </div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column align="center" label="预算当月完成">
        <el-table-column
          min-width="80"
          align="center"
          prop="thisMonthBudget"
          label="当月预算"
        ></el-table-column>
        <el-table-column min-width="80" align="center" label="当月完成率">
          <template slot-scope="scope">
            <div>
              {{ scope.row.completeMonthBudget + "%" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="80"
          align="center"
          prop="thisMonthIncomeThisMonthBudget"
          label="与预算差距"
        ></el-table-column>
      </el-table-column>
      <el-table-column align="center" label="预算年累计完成">
        <el-table-column
          min-width="90"
          align="center"
          prop="thisYearBudgetLj"
          label="预算目标"
        ></el-table-column>
        <el-table-column min-width="80" align="center" label="完成率">
          <template slot-scope="scope">
            <div>
              {{ scope.row.completeBudgetLj + "%" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="80"
          align="center"
          prop="gapOfBudgetLj"
          label="与年度预算差距"
        ></el-table-column>
      </el-table-column>
    </el-table>
    <div v-if="activeName == '2'" class="echarts" v-loading="chartsBoolean">
        <div v-for="(item, index) in lineList" :key="index">
            <lineEcharts
            :id="'lineEcharts' + index"
            :lineData="item"
            ></lineEcharts>
        </div>
    </div>
  </div>
</template>

 <script>
import {
  productCompletion,productCompletionMap
} from "@/api/workspace/income";
import lineEcharts from './lineEcharts'
export default {
  name: "product",
  components: {
    lineEcharts
  },
  props: {
    productData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      tableLoading: false,
      tableDataPro: [],
      activeName: '1',
      chartsBoolean: false,
      lineList: []
    };
  },
  mounted() {
      this.init()
  },
  methods: {
    init() {
        this.getProductData()
        this.getLineData()
    },
    getLineData() {
        this.lineList = []
        this.chartsBoolean = true
        productCompletionMap({
            acctMonth:this.productData.time,
            areaId: this.productData.areaId,
            remarks: this.productData.types
        }).then(res => {
            if (res.code == 200) {
                let data = res.data;
                let arr = [];
                data.forEach((item) => {
                    let lastData = [];
                    let indata = [];
                    item.data.forEach((its) => {
                        lastData.push(its.lastYearIncome);
                        indata.push(its.thisMonthIncome);
                    });
                    let indataArr = []
                    indata.forEach(item => {
                        if (item != undefined &&item != null) {
                            indataArr.push(item)
                        }
                    })
                    let obj = {};
                    obj["title"] = item.name;
                    obj["lastdata"] = lastData;
                    obj["indata"] = indataArr;
                    arr.push(obj);
                });
                console.log(arr)
                this.lineList = arr;
                this.chartsBoolean = false
            }
        })
    },
    handleClick(tab) {
      this.activeName = tab.name
    },
    tablePro_back() {
      this.$emit('tablePro_back')
    },
    getProductData() {
      this.tableLoading = true
      productCompletion({
        acctMonth: this.productData.time,
        areaId: this.productData.areaId,
        code: this.productData.types,
      }).then((res) => {
        if (res.code == 200) {
          this.tableLoading = false
          this.tableDataPro = res.data;
        }
      });
    },
    handle_trend(row) {
        this.$emit('handle_trend',row)
    },
    handle_source(row) {
        console.log(this.productData)
        if (this.productData.remarks == '3') {
            return
        }
        this.$emit('handle_source',row)
    }
  }
};
</script>

 <style lang="scss" scoped>
    .product {
        width: 100%;
        height: 100%;
        .areaBox {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;
          position: relative;
          .text {
            font-size: 20px;
          }
          .btns {
            position: absolute;
            right: 0;
          }
        }
        .area {
            color:#1890ff;
            cursor: pointer;
        }
        .grey {
            color: gray;
        }
        .echarts {
            min-height: 500px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            padding: 20px 0 0 0 ;
            > div {
                width: 33.33%;
                height: 200px;
            }
        }
    }
</style>
